<template>
	<div class="permission-management">
		<!-- 搜索区域 -->
		<div class="search-container">
			<el-input v-model="searchQuery" placeholder="输入权限名称或代码搜索" clearable @clear="handleSearchClear"
				@keyup.enter="handleSearch">
				<template #append>
					<el-button @click="handleSearch">
						<el-icon>
							<Search />
						</el-icon>
					</el-button>
				</template>
			</el-input>
		</div>

		<!-- 权限列表 -->
		<el-table :data="filteredPermissions" style="width: 100%" v-loading="loading" height="calc(100vh - 150px)"
			border>
			<el-table-column prop="permCode" label="权限代码" width="120" />
			<el-table-column prop="permName" label="权限名称" width="180" />
			<el-table-column prop="description" label="权限描述" />
		</el-table>
	</div>
</template>

<script>
	export default {
		name: 'EmployeeRegisterView',
	};
</script>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		ElMessage
	} from 'element-plus';
	import {
		Search
	} from '@element-plus/icons-vue';
	import {
		getAllPermission
	} from '@/api/permission.js';

	const loading = ref(false);
	const permissions = ref([]);
	const searchQuery = ref('');

	// 获取所有权限
	const fetchAllPermissions = async () => {
		loading.value = true;
		try {
			const res = await getAllPermission();
			permissions.value = res.data;
		} catch (error) {
			ElMessage.error('获取权限列表失败');
		} finally {
			loading.value = false;
		}
	};

	// 处理搜索
	const handleSearch = () => {
		// 搜索逻辑已经在computed属性中处理
	};

	// 清除搜索
	const handleSearchClear = () => {
		searchQuery.value = '';
	};

	// 过滤权限列表
	const filteredPermissions = computed(() => {
		if (!searchQuery.value) {
			return permissions.value;
		}
		const query = searchQuery.value.toLowerCase();
		return permissions.value.filter(
			(perm) =>
			perm.permName.toLowerCase().includes(query) ||
			perm.permCode.toLowerCase().includes(query) ||
			(perm.description && perm.description.toLowerCase().includes(query))
		);
	});

	// 初始化加载数据
	onMounted(() => {
		fetchAllPermissions();
	});
</script>

<style scoped>
	.permission-management {
		height: calc(100vh - 40px);
		display: flex;
		flex-direction: column;
		/* 继承父容器高度 */
		height: 100%;
		min-height: 0;
		overflow-y: auto;
	}

	.search-container {
		margin-bottom: 20px;
		display: flex;
		gap: 10px;
	}

	.el-table {
		flex: 1;
		overflow-y: auto;
	}

	:deep(.el-table__body-wrapper) {
		overflow-y: auto;
		scrollbar-width: thin;
	}

	@media screen and (max-width: 768px) {
		.permission-management {
			padding: 10px;
		}

		.el-table {
			font-size: 12px;
		}
	}
</style>